<template>
  <div class="app">
    <div class="ball">
      <div class="count" v-if="pass === 2">
        倒计时:{{ time }} 运球次数:{{ ballArray.length - 1 }}
      </div>
      <div class="time">
        练习时长:{{ kunCount }}
      </div>
      <div class="blood" v-if="endTest">
        <div class="bloodBox">
          <div class="bloodItem" :style="{ width: grade.kunkun * 4 + 'px', backgroundColor: `rgb(255,117,23)` }"></div>
        </div>
        <div class="bloodBox" style="transform: rotateZ(180deg);">
          <div class="bloodItem" :style="{ width: grade.heizi * 4 + 'px', backgroundColor: `rgb(100,100,100)` }"></div>
        </div>
      </div>
      <div v-if="gameState">
        <img
            src="@/assets/ikunBasketball.png"
            v-for="(item, index) in ballArray.length - 1 " :key="index" alt="">
      </div>
      <div v-else>
        <img
            src="@/assets/ikunBasketball.png"
            alt="" :class="shootLineState.final ? 'finalfun' : ''" @click="finallattack">
      </div>
    </div>
    <div v-show="!mentwo && !menthree" :class="{ men: true, jumpjump: jumpstate }" :style="`left:${left}px`">
      <div :class="{ head: true, bodybaskit: play }">
        <div class="faceback"></div>
        <img
            src="@/assets/ikunBasketball.png"
            alt=""
            :class="{ baskitball: true, baskitmove: baskitstate, baskitleft: baskitgame && pass === 2, baskitright: !baskitgame && pass === 2 }" />
        <!-- <div :class="{ faceright: !face }">答</div> -->
        <div class="chicken" :class="{ faceright: face }">
          <div class="eye eyeleft">
            <div class="zhu" style="background-color: #000;"></div>
          </div>
          <div class="eye eyeright">
            <div class="zhu" style="background-color: #000;"></div>
          </div>
          <div class="mouseBox">
            <div class="mouse mousetop"></div>
            <div class="mouse mousebottom"></div>
          </div>
          <div class="redFace redleft"></div>
          <div class="redFace redright"></div>
        </div>
        <div :class="`hear hear1 ${play ? 'hear1shake' : ''}`"></div>
        <div :class="`hear hear2 ${play ? 'hear2shake' : ''}`"></div>
        <div class=" body">
          <div class="kuku"></div>
          <div :class="{
            hand: true,
            left: true,
            moveleft: movestate,
            zindx: !face,
            handshake1: play
          }"></div>
          <div :class="{
            hand: true,
            right: true,
            moveright: movestate,
            zindx: face,
            handshake2: play
          }">

          </div>
          <div :class="{
            leg: true,
            left: true,
            moveleft: movestate,
            hear1shake: play
          }"></div>
          <div :class="{
            leg: true,
            right: true,
            moveright: movestate,
            hear2shake: play
          }"></div>
        </div>
      </div>
    </div>
    <div v-show="mentwo" class="men" style="left:700px">
      <div :class="['head', legState ? 'headMove' : '']">
        <div class="faceback"></div>
        <img
            src="@/assets/ikunBasketball.png"
            alt="" :class="['baskitball', legState ? 'baskit2' : '']" />
        <!-- <div :class="['faceright', legState ? 'facemove' : '']">答</div> -->
        <div class="chicken" :class="[legState ? 'facemove' : '']">
          <div class="eye eyeleft">
            <div class="zhu" style="background-color: #000;"></div>
          </div>
          <div class="eye eyeright">
            <div class="zhu" style="background-color: #000;"></div>
          </div>
          <div class="mouseBox">
            <div class="mouse mousetop"></div>
            <div class="mouse mousebottom"></div>
          </div>
          <div class="redFace redleft"></div>
          <div class="redFace redright"></div>
        </div>
        <div class="hear hear1"></div>
        <div class="hear hear2"></div>
        <div class="body">
          <div class="kuku kuku2">
            <div class="kubox">
              <div :class="['beidai1', legState ? 'beidai1move' : '']">
                <div class="bb bb1"></div>
                <div class="bb bb2"></div>
              </div>
              <div :class="['beidai2', legState ? 'beidai2move' : '']">
                <div class="bb bb1"></div>
                <div class="bb bb2"></div>
                <div class="bb bb3"></div>
              </div>
            </div>

          </div>
          <div :class="[
            'hand',
            'left',
            'hand1',
            legState ? 'hand3move' : ''
          ]">
            <div :class="['hand2', legState ? 'hand4move' : '']"></div>
          </div>
          <div :class="[
            'hand',
            'right',
            'hand1', legState ? 'hand1move' : '']
          ">
            <div :class="['hand2', legState ? 'hand2move' : '']"></div>
          </div>
          <div :class="[
            'leg',
            'left',
            'leg1',
            legState ? 'leg1move' : ''
          ]
          ">
            <div :class="['leg2', legState ? 'leg2move' : '']"></div>
          </div>
          <div :class="[
            'leg',
            'leg1',
            'right',
            legState ? 'leg3move' : ''
          ]">
            <div :class="['leg2', legState ? 'leg4move' : '']"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="menthree" class="men"
         :style="{ left: kunkun.left + 'px', top: kunkun.top + 'px', transition: endTest ? 'all 0.1s linear' : 'all 0.5s linear' }">
      <div :class="['head', 'headThree', shakeYState ? 'headShake' : '', shakeXState ? 'headMove1' : '']">
        <div class="faceback"></div>
        <div :class="['faceright', 'faceThree']">答</div>
        <div class="chicken" :class="{ heiziFace: !face }" :style="{ transform: `rotateY(${face ? 0 : -90}deg)` }">
          <div class="eye eyeleft" :style="endSecond ? 'cursor:pointer' : ''"
               @click="endSecond ? shootBoom() : () => { }">
            <div class="zhu" :class="shootLineState.eye ? 'shootLine' : ''"
                 :style="kunkunNomove ? '' : 'background-color: #000'">
              {{ kunkunNomove ?
                '≧' : '' }}
              <div class="redline" v-if="shootLineState.line"
                   :style="{ width: line1 + 'px', transform: `rotate(${reg1}deg)` }">
              </div>
            </div>
          </div>
          <div class="eye eyeright" :style="endSecond ? 'cursor:pointer' : ''"
               @click="endSecond ? shootBoom() : () => { }">
            <div class="zhu" :class="shootLineState.eye ? 'shootLine' : ''"
                 :style="kunkunNomove ? '' : 'background-color: #000'">
              {{ kunkunNomove ?
                '≦' : '' }}
              <div class="redline" v-if="shootLineState.line"
                   :style="{ width: line2 + 'px', transform: `rotate(${reg2}deg)` }">
              </div>
            </div>
          </div>
          <div class="mouseBox">
            <div class="mouse mousetop"></div>
            <div class="mouse mousebottom"></div>
          </div>
          <div class="redFace redleft"></div>
          <div class="redFace redright"></div>
        </div>
        <div class="hear hear1"></div>
        <div class="hear hear2"></div>
        <div :class="['body', shakeXState ? 'bodyShake' : '']">
          <div class="kuku kuku2">
            <div class="kubox">
              <div :class="['beidai1', 'beidai1set', legState ? 'beidai1move1' : '']">
                <div class="bb bb1"></div>
                <div class="bb bb2"></div>
              </div>
              <div :class="['beidai2', 'beidai2set', legState ? 'beidai2move2' : '']">
                <div class="bb bb1"></div>
                <div class="bb bb2"></div>
                <div class="bb bb3"></div>
              </div>
            </div>

          </div>
          <div :class="[
            'hand',
            'left',
            'hand1',
          ]" :style="{ transform: `rotate(${kunkun.hand1}deg)`, transition: shootLineState.ball ? 'all .5s' : '' }">
            <div :class="['hand2',]"
                 :style="{ transform: `rotate(${kunkun.hand3}deg)`, transition: shootLineState.ball ? 'all .5s' : '' }">
            </div>
          </div>
          <div :class="[
            'hand',
            'right',
            'hand1',
          ]
          " :style="{ transform: `rotate(${kunkun.hand2}deg)` }">
            <div :class="['hand2']" :style="{ transform: `rotate(${kunkun.hand4}deg)` }">
              <img
                  src="@/assets/ikunBasketball.png"
                  alt="" v-if="shootLineState.ball" class="finalBall" :style="{ width: shootLineState.ballSize + 'px' }">
            </div>
          </div>
          <div :class="[
            'leg',
            'left',
            'leg1',

          ]
          " :style="{ transform: `rotate(${kunkun.leg1}deg)` }">
            <div :class="['leg2',]" :style="{ transform: `rotate(${kunkun.leg3}deg)` }"></div>
          </div>
          <div :class="[
            'leg',
            'leg1',
            'right',

          ]" :style="{ transform: `rotate(${kunkun.leg2}deg)` }">
            <div :class="['leg2',]" :style="{ transform: `rotate(${kunkun.leg4}deg)` }"></div>
          </div>
        </div>
      </div>

    </div>
    <div class="men blackZi" :class="heiReset ? 'heiReset' : ''"
         :style="{ right: heizi.right + 'px', top: heizi.top + 'px', transition: endTest ? 'all 0.1s linear' : 'all 0.5s linear' }">
      <div class="head black round">
        <div :style="shootLineState.over ? 'font-size:20px' : ''">{{ heiziNoMove ? '' : grade.heizi === 0 ?
            shootLineState.over ? '❤﹀❤' : '*-*' : '黑' }}</div>
        <div class="body">
          <div class="hand hand1 " :style="{ transform: `rotate(${heizi.hand1}deg)` }">
            <div class="hand2" :style="{ transform: `rotate(${heizi.hand3}deg)`, height: '60px', bottom: '-50px' }">
            </div>
          </div>
          <div class="hand hand1 " :style="{ transform: `rotate(${heizi.hand2}deg)` }">
            <div class="hand2" :style="{ transform: `rotate(${heizi.hand4}deg)` }"></div>
          </div>
          <div class="leg leg1 " :style="{ transform: `rotate(${heizi.leg1}deg)` }">
            <div class="leg2" :style="{ transform: `rotate(${heizi.leg3}deg)` }"></div>
          </div>
          <div class="leg leg1 " :style="{ transform: `rotate(${heizi.leg2}deg)` }">
            <div class="leg2" :style="{ transform: `rotate(${heizi.leg4}deg)` }"></div>
          </div>
        </div>
      </div>
      <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/611e99d394f94038816566a54fbc1a0e~tplv-k3u1fbpfcp-watermark.image" v-if="shootLineState.boom" alt="" srcset="" class="boom">
    </div>
    <div class="whiteBack" v-if="backState.backBig">
      <Transition name="left">
        <div class="whiteTop" v-show="backState.backShow">
          <TransitionGroup name="right" tag="div" class="talkBoxLeft" v-show="talk.kun.length > 0">
            <div v-for="item in talk.kun" :key="item">{{ item }}</div>
          </TransitionGroup>
          <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ee0a5057c0240bfa89decee7be7a012~tplv-k3u1fbpfcp-watermark.image" alt="">
        </div>
      </Transition>
      <Transition name="left">
        <div class="whiteBot" v-show="backState.backShow">
          <TransitionGroup name="right" tag="div" class="talkBoxRight" v-show="talk.hei.length > 0">
            <div v-for="item in talk.hei" :key="item">{{ item }}</div>
          </TransitionGroup>
          <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/407d127c09f14485888d3d313bb23259~tplv-k3u1fbpfcp-watermark.image" alt="">
        </div>
      </Transition>
    </div>
    <Transition name="over">
      <div class="overbox" v-show="shootLineState.back"></div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import {ElMessageBox} from 'element-plus'

const movestate = ref(false);//是否移动
const left = ref(100);//位置
const jumpstate = ref(false);//跳跃状态
const face = ref(false);//面向
const time = ref(10);//计时器
const baskitstate = ref(true);//运球状态
const baskitgame = ref(false);//运球动画状态
const ballArray = reactive([1]);//运球数据
const play = ref(false)//运球身体部分
const kunCount = ref('零年')//总分数
const level = ref(1)//运球难度
const pass = ref(1)//关卡
const mentwo = ref(false)//第二个小人
const menthree = ref(false)//第三个小人
const shakeXState = ref(false)//X抖动状态
const shakeYState = ref(false)//Y抖动状态
const gameState = ref(false)//游戏状态
const legState = ref(false)//第三关动画
const kunkun = reactive({
  top: 325,
  left: 700,
  hand1: 50,
  hand2: -40,
  hand3: -100,
  hand4: 90,
  leg1: 55,
  leg2: -55,
  leg3: -40,
  leg4: 40
})
//  小黑子四肢
const heizi = reactive({
  top: 0,
  right: -200,
  hand1: 80,
  hand2: -60,
  hand3: 0,
  hand4: 112,
  leg1: 110,
  leg2: -70,
  leg3: -8,
  leg4: 117
  // hand1: 30,
  // hand2: -30,
  // hand3: 0,
  // hand4: 0,
  // leg1: 30,
  // leg2: -30,
  // leg3: 0,
  // leg4: 0
})
// 重置动画
const heiReset = ref(false)
// 人物背景状态
const backState = reactive({
  backShow: false,
  backBig: false,
})
// 对话
const talk = reactive({
  kun: [],
  hei: []
})
// 小黑子动作数组 0-right 1-right 2-攻击
const heiAttackArray = reactive([0, 1, 1, 1, 2, 2, 2, 2, 2, 2])
// 小黑子僵直状态
const heiziNoMove = ref(false)
// kunkun僵直状态
const kunkunNomove = ref(false)
// 攻击状态
const attackState = ref(false)
// 血量
const grade = reactive({
  kunkun: 50,
  heizi: 50
})
// 计时器
const interval = reactive({
  move: '',
  attack: ''
})
// 最终关
const endTest = ref(false)
// 最终关第二阶段
const endSecond = ref(false)
const shootLineState = reactive({
  eye: false,//红眼
  line: false,//射线
  boom: false,//爆炸
  final: false,//大招
  ball: false,//篮球
  ballSize: 70,//篮球尺寸
  back: false,//结束背景
  over: false,//完结
})
let count = ''//定时器
const line1 = computed(() => {
  return calcHypotenuse(1430 - kunkun.left - heizi.right, 200)
})
const line2 = computed(() => {
  return calcHypotenuse(1400 - kunkun.left - heizi.right, 200)
})
const reg1 = computed(() => {
  return calcAngle(200, 1430 - kunkun.left - heizi.right)
})
const reg2 = computed(() => {
  return calcAngle(200, 1400 - kunkun.left - heizi.right)
})
onMounted(() => {
  ElMessageBox.alert('先通过awd或者←↑→来熟悉下kunkun吧', '提示', { showClose: false }).then(() => {
    gameState.value = true
    window.addEventListener("keydown", keyclick);
  })
});
// 算直角三角形第三边
function calcHypotenuse(a, b) {
  return Math.sqrt(a * a + b * b);
}
// 计算角度
function calcAngle(a, b) {
  return Math.atan2(a, b) * 180 / Math.PI;
}
//移动监听
function keyclick(e) {
  switch (e.key) {
    case "w":
      jump();
      break;
    case "ArrowUp":
      jump();
      break;
    case "a":
      if (!movestate.value)
        moveleft();
      break;
    case "ArrowLeft":
      if (!movestate.value)
        moveleft();
      break;
    case "d":
      if (!movestate.value)
        moveright();
      break;
    case "ArrowRight":
      if (!movestate.value)
        moveright();
      break;
    default:
  }
}
//左移
function moveleft() {
  face.value = true;
  movestate.value = true;
  if (left.value >= 50 && left.value != 700) {
    left.value = left.value - 100;
  } else {
    removeClick();
  }
  setTimeout(() => {
    movestate.value = false;
  }, 500);
}
//右移
function moveright() {
  face.value = false;
  movestate.value = true;
  if (left.value < 700) {
    left.value = left.value + 100;
  } else {
    removeClick();
  }
  setTimeout(() => {
    movestate.value = false;
  }, 500);
}
//跳跃
function jump() {
  console.log("跳");
  if (!jumpstate.value) {
    jumpstate.value = true;
    setTimeout(() => {
      jumpstate.value = false;
    }, 500);
  }
}
//第一关结束第二关开始
function removeClick() {
  kunCount.value = '半年'
  window.removeEventListener("keydown", keyclick);
  baskitstate.value = false;
  pass.value = 2
  ElMessageBox.confirm(`坤坤运球挑战，完成10秒左右运球`, "篮球练习", {
    showClose: false,
    confirmButtonText: "简单模式(50次)",
    cancelButtonText: "困难模式(100次)"
  }).then(() => {
    level.value = 1
    start()
  }).catch(() => {
    level.value = 2
    start()
  });
}
//第二关开始
function start() {
  window.addEventListener("keydown", playball);
  count = setInterval(() => {
    time.value--
    if (time.value === 0) {
      clearInterval(count)
      // 难度控制level.value * x
      if (ballArray.length - 1 > level.value * 50) {
        victory()
      } else {
        baskitgame.value ? fail(0, '坤坤未完成练习目标,再来一次吧') : fail(1, '坤坤未完成目标,再来一次吧')
      }
    }
  }, 1000);
}
//监听运球
function playball(e) {
  switch (e.key) {
    case "a":
      ballleft();
      break;
    case "ArrowLeft":
      ballleft();
      break;
    case "d":
      ballright();
      break;
    case "ArrowRight":
      ballright();
      break;
    default:
  }
}
//球左移动
function ballleft() {
  if (ballArray.at(-1) === 1) {
    shake()
    baskitgame.value = true
    ballArray.push(0);
  } else {
    fail(0);
  }
}
//球右移动
function ballright() {
  if (ballArray.at(-1) === 0) {
    shake()
    baskitgame.value = false
    ballArray.push(1);
  } else {
    fail(1);
  }
}
//运球动作
function shake() {
  play.value = true
  setTimeout(() => {
    play.value = false
  }, 100);
}
//运球失败
function fail(a, text = '篮球掉了,重新开始吧') {
  clearInterval(count)
  window.removeEventListener("keydown", playball);
  ElMessageBox.alert(text, "提示", { showClose: false }).then(() => {
    ballArray.length = 0
    ballArray.push(a)
    time.value = 10
    start()
  });
}

//运球成功
function victory() {
  clearInterval(count)
  window.removeEventListener("keydown", playball);
  let max = localStorage.getItem('maxkun')
  if (ballArray.length - 1 > max) {
    localStorage.setItem('maxkun', ballArray.length - 1)
  }
  ElMessageBox.alert(`挑战成功，练习时长+1！(当前最好成绩为${localStorage.getItem('maxkun')}个)`, "提示", { confirmButtonText: '继续挑战', showClose: false }).then(() => {
    resetPosition()
    let timeinterval = setInterval(() => {
      ballArray.pop()
      if (ballArray.length === 1) {
        clearInterval(timeinterval)
      }
    }, 50);
    turn()
  })
}
//重置位置
function resetPosition() {
  left.value = 700
  face.value = false
  kunCount.value = '一年半'
  baskitstate.value = true
  pass.value = 3
  baskitgame.value = false
}
//转身动画
function turn() {
  setTimeout(() => {
    baskitstate.value = false
    mentwo.value = true
    legState.value = true
    setTimeout(() => {
      mentwo.value = false
      legState.value = false
      menthree.value = true
      startThree()
    }, 3000);
  }, 2000);
}
//第三关开始
function startThree() {
  ElMessageBox.alert('真爱粉检测，完成五次抖肩', '唱跳练习', { confirmButtonText: '开始挑战', showClose: false }).then(() => {
    ballArray[0] = 1
    window.addEventListener('keydown', kunshake)
  })
}
//监听抖动
function kunshake(e) {
  switch (e.key) {
    case 'ArrowUp':
      shakeTop()
      break;
    case 'w':
      shakeTop()
      break;
    case 'ArrowDown':
      shakeDown()
      if (ballArray.length === 21) {
        endgame()
      }
      break;
    case 's':
      shakeDown()
      if (ballArray.length === 21) {
        endgame()
      }
      break;
    case 'ArrowLeft':
      shakeLeft()
      break;
    case 'a':
      shakeLeft()
      break;
    case 'ArrowRight':
      shakeRight()
      break;
    case 'd':
      shakeRight()
      break;
    default:
      break;
  }
}
//上抖
function shakeTop() {
  shakeYState.value = true
  kunkun.leg1 = 30
  kunkun.leg2 = -30
  kunkun.leg3 = 0
  kunkun.leg4 = 0
  if (ballArray.at(-1) === 2 && shakeXState.value === true) {
    ballArray.push(3)
  } else {
    ballArray.length = 1
  }
}
//下抖
function shakeDown() {
  shakeYState.value = false
  kunkun.leg1 = 55
  kunkun.leg2 = -55
  kunkun.leg3 = -40
  kunkun.leg4 = 40
  if (ballArray.at(-1) === 4 && shakeXState.value === false) {
    ballArray.push(1)
  } else {
    ballArray.length = 1
  }

}
//左抖动
function shakeLeft() {
  shakeXState.value = false
  kunkun.hand1 = 50
  kunkun.hand2 = -40
  kunkun.hand3 = -100
  kunkun.hand4 = 90
  if (ballArray.at(-1) === 3 && shakeYState.value === true) {
    ballArray.push(4)
  } else {
    ballArray.length = 1
  }
}
//右抖动
function shakeRight() {
  shakeXState.value = true;
  kunkun.hand1 = 40
  kunkun.hand2 = -55
  kunkun.hand3 = -110
  kunkun.hand4 = 110
  if (ballArray.at(-1) === 1 && shakeYState.value === false) {
    ballArray.push(2)
  } else {
    ballArray.length = 1
  }
}
function autoplay() {
  let index = 0
  count = setInterval(() => {
    switch (index) {
      case 0:
        shakeRight()
        break;
      case 1:
        shakeTop()
        break;
      case 2:
        shakeLeft()
        break;
      case 3:
        shakeDown()
        index = -1
        break;
      default:
        break;
    }
    index++
  }, 100);
}
//第三关结束
function endgame() {
  kunCount.value = '两年半'
  gameState.value = false
  window.removeEventListener('keydown', kunshake)
  ElMessageBox.alert('练习完成！music~', '只因你太棒！', { confirmButtonText: '鸡你太美~', showClose: false }).then(() => {
    ballArray.splice(0, 1)
    autoplay()
    setTimeout(() => {
      heizi.right = 600
      heizi.top = 325
      setTimeout(() => {
        //坤坤后退
        clearInterval(count)
        shakeYState.value = false
        shakeXState.value = false
        kundown(50, -40, -100, 90, 55, -55, -40, 40)
        kunkun.left = 100
        // 小黑子复位动画
        heiReset.value = true
        heizi.right = 100
        heizidown(80, -80, -60, 60, 60, -60, -100, 100)
        heizi.top = 100
        legState.value = true
        setTimeout(() => {
          // 蘸豆姿势
          heizidown(45, -57, 74, 99, 55, -55, -36, 36)
          heizi.top = 345
          face.value = true
          kundown(45, -40, -75, -80, 55, -55, -36, 36)
          setTimeout(() => {
            backState.backBig = true
          }, 500);
          setTimeout(() => {
            backState.backShow = true
            setTimeout(() => {
              talk.kun.push('你干嘛~哎呦~')
              setTimeout(() => {
                talk.hei.push('刚才突然一个篮球飞脸上了,你是故意的还是不小心的？')
                setTimeout(() => {
                  talk.kun.pop()
                  talk.kun.push('原来是小黑子！是故意的！(即答)')
                  setTimeout(() => {
                    talk.hei.pop()
                    talk.hei.push('(咬牙切齿)受死吧！')
                    setTimeout(() => {
                      backState.backShow = false
                      setTimeout(() => {
                        backState.backBig = false

                        ElMessageBox.alert('打败小黑子!(ad或←→进行移动，j攻击)', '最终挑战', { confirmButtonText: '冲鸭!', showClose: false }).then(() => {
                          // 蘸豆开始
                          endTest.value = true
                          window.addEventListener('keydown', bindKeyDown)
                          // 小黑子自动移动
                          heiziAutoMove()
                        })
                      }, 1000);
                    }, 2000);
                  }, 2000);
                }, 2000);
              }, 2000);
            }, 1000)
          }, 1000);
        }, 300)
      }, 500)
    }, 3000);
  })
}
function kunMoveLeft() {
  movestate.value = true
  kundown(false, false, false, false, 30, -30, 0, 0)
  if (kunkun.left > 0) {
    kunkun.left -= 50
  }
  setTimeout(() => {
    kundown(false, false, false, false, 55, -55, -36, 36)
    movestate.value = false
  }, 100);
}
function kunMoveRight() {
  movestate.value = true
  kundown(false, false, false, false, 30, -30, 0, 0)
  if (kunkun.left < 1500 - heizi.right - 200) {
    kunkun.left += 50
  }
  setTimeout(() => {
    kundown(false, false, false, false, 55, -55, -36, 36)
    movestate.value = false
  }, 100);
}
function kunAttack() {
  attackState.value = true
  kundown(false, -90, false, 0, false, false, false, false)
  if (1300 - kunkun.left - heizi.right < 50) {
    console.log('打中了小黑子');
    heiziHit()
  }
  setTimeout(() => {
    attackState.value = false
    kundown(false, -40, false, -80, false, false, false, false)
  }, 100);
}
function heiMoveRight() {
  heizidown(false, false, false, false, 30, -30, 0, 0)
  if (heizi.right > 0) {
    heizi.right -= 50
  }
  setTimeout(() => {
    heizidown(false, false, false, false, 55, -55, -36, 36)
  }, 100);
}
function heiMoveLeft() {
  heizidown(false, false, false, false, 30, -30, 0, 0)
  if (heizi.right < 1500 - kunkun.left - 200) {
    heizi.right += 50
  }
  setTimeout(() => {
    heizidown(false, false, false, false, 55, -55, -36, 36)
  }, 100);
}
function heiAttack() {
  heizidown(90, false, 0, false, false, false, false, false)
  if (1300 - kunkun.left - heizi.right < 80) {
    console.log('打中了kunkun');
    kunkunHit()
  }
  setTimeout(() => {
    heizidown(45, false, 74, false, false, false, false, false)
  }, 100);
}
// 小黑子自动移动攻击
function heiziAutoMove() {
  interval.move = setInterval(() => {
    switch (getrandom(0, heiAttackArray.length - 1)) {
      case 0:
        if (!heiziNoMove.value) {
          heiMoveRight()
        }
        break;
      case 1:
        if (!heiziNoMove.value) {
          heiMoveLeft()
        }
        break;
      case 2:
        if (!heiziNoMove.value) {
          heiMoveLeft()
        }
        break;
      default:
        break;
    }
  }, 100);
  interval.attack = setInterval(() => {
    switch (getrandom(0, heiAttackArray.length - 1)) {
      case 0:
        break;
      case 1:
        if (!heiziNoMove.value) {
          heiAttack()
        }
        break;
      case 2:
        if (!heiziNoMove.value) {
          heiAttack()
        }
        break;
      default:
        break;
    }
  }, 100)
}
// kunkun僵直
function kunkunHit() {
  movestate.value = true
  attackState.value = true
  kunkunNomove.value = true
  if (kunkun.left > 25) {
    kunkun.left -= 80
  }
  if (grade.kunkun > 0) {
    grade.kunkun -= 2
    if (grade.kunkun === 0) {
      // 游戏结束 重来
      window.removeEventListener('keydown', bindKeyDown)
      kundown(30, -30, 0, 0, 30, -30, 0, 0)
      clearInterval(interval.move)
      clearInterval(interval.attack)
      ElMessageBox.alert('可恶的小黑子，再来一次吧', '提示', { confirmButtonText: '再来一次!', showClose: false }).then(() => {
        endSecond.value = false
        heizidown(45, -57, 74, 99, 55, -55, -36, 36)
        kundown(45, -40, -75, -80, 55, -55, -36, 36)
        grade.kunkun = 50
        grade.heizi = 50
        heizi.right = 100
        kunkun.left = 100
        window.addEventListener('keydown', bindKeyDown)
        heiziAutoMove()
      })
    }
  }
  setTimeout(() => {
    kunkunNomove.value = false
    movestate.value = false
    attackState.value = false
  }, 100);
}
function heiziHit() {
  if (heizi.right > 30) {
    heizi.right -= 50
  }
  if (grade.heizi > 0) {
    grade.heizi--
    if (grade.heizi === 0) {
      // 游戏结束
      window.removeEventListener('keydown', bindKeyDown)
      clearInterval(interval.move)
      clearInterval(interval.attack)
      grade.heizi = 50
      setTimeout(() => {
        ElMessageBox.alert('？？？是回血外挂！想想别的办法吧！(听说爆炸会让小黑子失去荔枝)', '提示', { confirmButtonText: '继续', showClose: false }).then(() => {
          // 第二阶段
          endSecond.value = true
          heizidown(45, -57, 74, 99, 55, -55, -36, 36)
          kundown(45, -40, -75, -80, 55, -55, -36, 36)
          window.addEventListener('keydown', bindKeyDown)
          heiziAutoMove()
        })
      }, 1500);

    }
  }
  heiziNoMove.value = true
  setTimeout(() => {
    heiziNoMove.value = false
  }, 90);
}
// 随机数
function getrandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min
}
// 再看一眼就会爆炸
function shootBoom() {
  endSecond.value = false
  window.removeEventListener('keydown', bindKeyDown)
  clearInterval(interval.move)
  clearInterval(interval.attack)
  shootLineState.eye = true
  setTimeout(() => {
    shootLineState.line = true
    shootLineState.boom = true
    heizidown(30, -30, 0, 0, 30, -30, 0, 0)
    grade.heizi = 0
    setTimeout(() => {
      shootLineState.line = false
      shootLineState.boom = false
      ElMessageBox.alert('趁现在，使用终结技能打败小黑子!', '再多看一眼就会爆炸~', { confirmButtonText: '确定', showClose: false }).then(() => {
        shootLineState.final = true
      })
    }, 1000);
  }, 1000);

}
// 篮球的力量
function finallattack() {
  shootLineState.final = false
  shootLineState.ball = true
  let handflag = false
  interval.move = setInterval(() => {
    if (handflag) {
      kundown(-10, -40, -88, -80, false, false, false, false)
      handflag = false
      shootLineState.ballSize++

    } else {
      kundown(-50, -40, -80, -80, false, false, false, false)
      handflag = true
      shootLineState.ballSize++
    }
    if (shootLineState.ballSize == 90) {
      clearInterval(interval.move)
      kundown(55, -80, false, -10, false, false, false, false)
      // 攻击
      interval.attack = setInterval(() => {
        if (kunkun.left < 1200) {
          kunkun.left += 50
        }
        if (1500 - kunkun.left - heizi.right <= 300) {
          heizidown(75, -239, 0, 0, 80, 40, 0, 0)
          if (heizi.right > 0) {
            heizi.right -= 50
          } else {
            if (getrandom(0, 1)) {
              heizi.top = 340
            } else {
              heizi.top = 350
            }
            shootLineState.back = true
            clearInterval(interval.attack)
            setTimeout(() => {
              shootLineState.back = false
              heizidown(30, -30, 0, 0, 30, -30, 0, 0)
              kundown(30, -30, 0, 0, 30, -30, 0, 0)
              heizi.right = 650
              kunkun.left = 650
              shootLineState.ball = false
              shootLineState.over = true
              endTest.value = false
              setTimeout(() => {
                ElMessageBox.alert('kunkun成功感化小黑子,小黑子成为了真爱粉~', '结局', { confirmButtonText: '完结撒花~', showClose: false }).then(() => {
                  ElMessageBox.alert('制作实属不易,点赞收藏支持下啦~亲,或者可以分享给朋友呦', '最后一个弹框', { confirmButtonText: '有缘再见~', showClose: false })
                })
              }, 5000);
              // 爆炸
            }, 5000);
          }
        }
      }, 100);
    }
  }, 500);
}

// 按键绑定
function bindKeyDown(e) {
  switch (e.key) {
      // case 'ArrowUp':
      //   break;
      // case 'w':
      //   break;
      // case 'ArrowDown':
      //   break;
      // case 's':
      //   break;
    case 'ArrowLeft':
      if (!movestate.value) {
        kunMoveLeft()
      }
      break;
    case 'a':
      if (!movestate.value) {
        kunMoveLeft()
      }
      break;
    case 'ArrowRight':
      if (!movestate.value) {
        kunMoveRight()
      }
      break;
    case 'd':
      if (!movestate.value) {
        kunMoveRight()
      }
      break;
    case 'j':
      if (!attackState.value) {
        kunAttack()
      }
      break;
    case ' ':
      break;
    default:
      break;
  }
}
// 坤坤动作
function kundown(a1, a2, a3, a4, a5, a6, a7, a8) {
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] !== false) {
      switch (i) {
        case 0:
          kunkun.hand1 = a1
          break;
        case 1:
          kunkun.hand2 = a2
          break;
        case 2:
          kunkun.hand3 = a3
          break;
        case 3:
          kunkun.hand4 = a4
          break;
        case 4:
          kunkun.leg1 = a5
          break;
        case 5:
          kunkun.leg2 = a6
          break;
        case 6:
          kunkun.leg3 = a7
          break;
        case 7:
          kunkun.leg4 = a8
          break;
      }
    }
  }
}
// 小黑子动作
function heizidown(a1, a2, a3, a4, a5, a6, a7, a8) {
  for (let i = 0; i < arguments.length; i++) {
    if (arguments[i] !== false) {
      switch (i) {
        case 0:
          heizi.hand1 = a1
          break;
        case 1:
          heizi.hand2 = a2
          break;
        case 2:
          heizi.hand3 = a3
          break;
        case 3:
          heizi.hand4 = a4
          break;
        case 4:
          heizi.leg1 = a5
          break;
        case 5:
          heizi.leg2 = a6
          break;
        case 6:
          heizi.leg3 = a7
          break;
        case 7:
          heizi.leg4 = a8
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1500px) {
  .app {
    transform: scale(0.8);
  }
}

* {
  margin: 0;
  padding: 0;
  user-select: none;
}

.app {
  display: flex;
  width: 1500px;
  height: 700px;
  background-image: url("@/assets/ikunBg.png");
  background-attachment: fixed;
  background-size: 1500px 700px;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.blood {
  display: flex;
  justify-content: space-between;

  .bloodBox {
    width: 200px;
    height: 20px;
    border: 5px solid #000;

    .bloodItem {
      height: 20px;
      transition: width 0.5s linear;
    }
  }
}

.round {
  border-radius: 50%;
}

.ball {
  font-size: 20px;
  width: 100%;

  img {
    width: 50px;
  }
}

@keyframes moveleft {
  0% {
    transform: rotate(30deg);
  }

  50% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(30deg);
  }
}

@keyframes moveright {
  0% {
    transform: rotate(-30deg);
  }

  50% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(-30deg);
  }
}

@keyframes jumpjump {
  0% {
    top: 325px;
  }

  50% {
    top: 150px;
  }

  100% {
    top: 325px;
  }
}

@keyframes baskit {
  from {
    bottom: -120px;
  }

  to {
    bottom: -200px;
  }
}

@keyframes baskitleft {
  0% {
    left: 60px;
    bottom: -120px;
  }

  50% {
    left: 20px;
    bottom: -200px;
  }

  100% {
    left: -30px;
    bottom: -120px;
  }
}

@keyframes baskitright {
  0% {
    left: -30px;
    bottom: -120px;
  }

  50% {
    left: 20px;
    bottom: -200px;
  }

  100% {
    left: 60px;
    bottom: -120px;
  }
}

.baskitball {
  position: absolute;
  left: 60px;
  bottom: -120px;
  z-index: 99;
}

.baskitmove {
  animation: baskit 0.2s ease-in-out infinite alternate;
}

.baskitleft {
  animation: baskitleft 0.1s ease-in-out;
  animation-fill-mode: forwards;
}

.baskitright {
  animation: baskitright 0.1s ease-in-out;
  animation-fill-mode: forwards;
}

.moveleft {
  animation: moveleft 0.5s linear;
}

.moveright {
  animation: moveright 0.5s linear;
}

.jumpjump {
  animation: jumpjump 0.5s ease-in-out;
}

.faceright {
  user-select: none;
  transform: rotateY(180deg);
  z-index: 99;
}

.men {
  position: absolute;
  top: 325px;
  left: 120px;
  transition: all 0.5s linear;

  .bodybaskit {
    animation: bodybaskit 0.1s ease-in-out;
  }

  @keyframes bodybaskit {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(40px);
    }

    100% {
      transform: translateY(0px);
    }
  }

  .head {
    width: 100px;
    height: 100px;
    position: relative;
    text-align: center;
    line-height: 115px;
    color: #000;
    font-size: 80px;
    font-family: cursive;
    z-index: 2;

    .faceback {
      border-radius: 50%;
      background-color: rgb(248, 219, 142);
      box-sizing: border-box;
      border: 3px solid #000;
      width: 100px;
      height: 100px;
      position: relative;
      z-index: 2;
    }

    .chicken {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;

      .eye {
        position: absolute;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 3px solid #000;
        background-color: #fff;
        top: 33px;
        box-sizing: border-box;

        .zhu {
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          right: 5px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 12px;
          text-align: center;
          line-height: 8px;
          font-weight: bold;

          .redline {
            position: relative;
            left: 50%;
            top: 50%;
            height: 2px;
            background-color: red;
            transform-origin: 0 0;
            transition: width 1s linear;
          }
        }

        .shootLine {
          animation: shootLine 3s linear;
        }

        @keyframes shootLine {

          0%,
          100% {
            width: 8px;
            height: 8px;
            background-color: #000;
          }

          50% {
            width: 12px;
            height: 12px;
            background-color: red;
          }
        }
      }

      .mouseBox {
        width: 30px;
        height: 25px;
        position: absolute;
        left: 55%;
        top: 63px;
        transform: translateX(-50%);
        overflow: hidden;

        &::after {
          content: "";
          width: 50px;
          height: 50px;
          border: 3px solid #000;
          position: absolute;
          bottom: 9px;
          left: -13px;
          border-radius: 50%;
          z-index: 3;
        }

        .mouse {
          background-color: rgb(255, 142, 104);
          box-sizing: border-box;
        }

        .mousetop {
          width: 100%;
          height: 13px;
          border-radius: 40px 40px 0px 0px;
          border: 3px solid #000;
          border-bottom: none;
          position: relative;
          z-index: 2;
        }

        .mousebottom {
          position: relative;
          top: -11px;
          width: 30px;
          height: 19px;
          border-radius: 50%;
          border: 3px solid #000;
          z-index: 1;
        }
      }

      .redFace {
        width: 20px;
        height: 20px;
        background-color: rgb(222, 18, 52);
        border-radius: 50%;
        position: absolute;
        top: 63px;
      }

      .redleft {
        left: 14px;
      }

      .redright {
        right: 6px;
      }

      .eyeleft {
        left: 20px;
        z-index: 3;
      }

      .eyeright {
        right: 12px;
        z-index: 2;
      }
    }

    .hear {
      width: 75px;
      height: 30px;
      position: absolute;
      top: -20px;
    }

    .hear1 {
      left: -20px;
      transform: rotate(-35deg);
      transform-origin: 75px 30px;
      z-index: 3;
      background-image: linear-gradient(to right, lightgrey, grey);
    }

    @keyframes hear1shake {
      0% {
        transform: rotate(-35deg);
      }

      50% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(-35deg);
      }
    }

    .hear1shake {
      animation: hear1shake 0.1s ease-in-out;
    }

    .hear2 {
      right: -20px;
      transform: rotate(35deg);
      transform-origin: 0 30px;
      background-image: linear-gradient(to right, grey, lightgrey);
      z-index: 3;
    }

    @keyframes hear2shake {
      0% {
        transform: rotate(35deg);
      }

      50% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(35deg);
      }
    }

    .hear2shake {
      animation: hear2shake 0.1s ease-in-out;
    }

    .body {
      position: absolute;
      top: 100%;
      left: 50%;
      width: 20px;
      height: 100px;
      background-color: #000;
      transform: translate(-50%, -5%);
      z-index: 1;

      .kuku {
        background-color: darkgray;
        width: 20px;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 23;

        &::before {
          content: "";
          width: 4px;
          height: 50px;
          position: absolute;
          top: -50px;
          left: 2px;
          z-index: 98;
          background-color: darkgray;
        }

        &::after {
          content: "";
          width: 4px;
          height: 50px;
          position: absolute;
          top: -50px;
          right: 2px;
          z-index: 98;
          background-color: darkgray;
        }
      }

      .hand {
        width: 20px;
        height: 100px;
        background-color: #000;
        position: absolute;
        top: -4px;
        left: 0;
        transform-origin: top;
      }

      .handshake1 {
        animation: handshake1 0.1s ease-in-out;
      }

      .handshake2 {
        animation: handshake2 0.1s ease-in-out;
      }

      @keyframes handshake1 {
        0% {
          transform: rotate(30deg);
        }

        50% {
          transform: rotate(80deg);
        }

        100% {
          transform: rotate(30deg);
        }
      }

      @keyframes handshake2 {
        0% {
          transform: rotate(-30deg);
        }

        50% {
          transform: rotate(-80deg);
        }

        100% {
          transform: rotate(-30deg);
        }
      }

      .leg {
        width: 20px;
        height: 100px;
        background: darkgray;
        position: absolute;
        bottom: -95px;
        left: 0;
        transform-origin: top;
      }

      .left {
        transform: rotate(30deg);
      }

      .right {
        transform: rotate(-30deg);
      }

      .zindx {
        z-index: 99;
      }
    }
  }
}

.hand1 {
  height: 60px !important;

  .hand2 {
    width: 20px;
    height: 50px;
    position: absolute;
    bottom: -40px;
    background-color: #000;
    transform-origin: 10px 0px;
  }
}

.headMove {
  animation: headMove 3s linear;
  animation-fill-mode: forwards;
}

@keyframes headMove {
  83% {
    top: 0;
  }

  100% {
    top: 20px;
  }
}

.kuku2 {
  position: relative;

  .kubox {
    overflow: hidden;
    position: relative;
    width: 20px;
    height: 50px;
    top: -50px;
  }

  &::after {
    content: '';
    display: none;
  }

  &::before {
    content: '';
    display: none;
  }

  .bb {
    background-color: darkgray;
    position: absolute;
  }

  .beidai1 {
    position: absolute;

    // top: -50px;
    .bb1 {
      width: 4px;
      height: 50px;
      left: 2px;
    }

    .bb2 {
      width: 4px;
      height: 50px;
      left: 14px;
    }
  }

  .beidai1move {
    animation: beidai1 3s linear;
    animation-fill-mode: forwards;
  }

  .beidai2move {
    animation-delay: 2s;
    animation: beidai2 3s linear;
    animation-fill-mode: forwards;
  }

  .beidai1move1 {
    animation: beidai1 3s linear reverse;
    animation-fill-mode: forwards;
  }

  .beidai1set {
    left: 20px;
  }

  .beidai2set {
    left: 0;
  }

  .beidai2move2 {
    animation-delay: 2s;
    animation: beidai2 3s linear reverse;
    animation-fill-mode: forwards;
  }

  @keyframes beidai1 {
    0% {
      left: 0
    }

    83% {
      left: 0
    }

    100% {
      left: 20px
    }
  }

  @keyframes beidai2 {
    0% {
      left: -40px
    }

    85% {
      left: -40px
    }

    100% {
      left: 0
    }
  }

  .beidai2 {
    position: absolute;

    // top: -50px;
    .bb1 {
      width: 4px;
      height: 25px;
      left: 4px;
      transform: rotate(-25deg);
    }

    .bb2 {
      width: 4px;
      height: 35px;
      left: 8px;
      top: 20px;
    }

    .bb3 {
      width: 4px;
      height: 25px;
      left: 12px;
      transform: rotate(25deg);
    }
  }
}

.leg1 {
  height: 60px !important;
  bottom: -55px !important;

  .leg2 {
    width: 20px;
    height: 50px;
    position: absolute;
    bottom: -40px;
    background-color: darkgray;
    transform-origin: 10px 5px;
  }
}

.leg1move {
  animation: leg1 3s linear;
  animation-fill-mode: forwards;
}

.leg2move {
  animation: leg2 3s linear;
  animation-fill-mode: forwards;
}

.leg3move {
  animation: leg3 3s linear;
  animation-fill-mode: forwards;
}

.leg4move {
  animation: leg4 3s linear;
  animation-fill-mode: forwards;
}

@keyframes leg1 {
  83% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(55deg);
  }
}

@keyframes leg2 {
  83% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-40deg);
  }
}

@keyframes leg3 {
  83% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(-55deg);
  }
}

@keyframes leg4 {
  83% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(40deg);
  }
}

@keyframes hand2 {
  0% {
    transform: rotate(0deg);
  }

  16% {
    transform: rotate(-90deg);
  }

  83% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(90deg);
  }
}

.hand2move {
  animation: hand2 3s linear;
  animation-fill-mode: forwards;
}

.hand1move {
  animation: hand1 3s linear;
  animation-fill-mode: forwards;
}

@keyframes hand1 {
  0% {
    transform: rotate(-30deg);
  }

  16% {
    transform: rotate(-50deg);
  }

  83% {
    transform: rotate(-50deg);
  }

  100% {
    transform: rotate(-40deg);
  }
}

@keyframes hand3 {
  83% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(50deg);
  }
}

@keyframes hand4 {

  83% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-100deg);
  }
}

.hand3move {
  animation: hand3 3s linear;
  animation-fill-mode: forwards;
}

.hand4move {
  animation: hand4 3s linear;
  animation-fill-mode: forwards;
}

@keyframes baskit2 {
  0% {
    left: 70px;
    bottom: -120px;
  }

  16% {
    left: 95px;
    bottom: -10px;
    transform: rotate(0deg);
  }

  66% {
    left: 95px;
    bottom: -10px;
    transform: rotate(1440deg);
  }

  100% {
    left: 750px;
    bottom: 480px;
    transform: rotate(3600deg);
    visibility: hidden;
  }
}

.baskit2 {
  animation: baskit2 3s ease-in-out;
  animation-fill-mode: forwards;
}

.facemove {
  transform-origin: center center 40px;
  animation: facemove 3s linear;
  animation-fill-mode: forwards;
}

@keyframes facemove {
  0% {
    transform: rotateY(0deg);
  }

  16% {
    transform: rotateY(-20deg);
  }

  83% {
    transform: rotateY(-20deg);
  }

  100% {
    transform: rotateY(-90deg);
  }
}

.headThree {
  top: 20px !important;
}

.faceThree {
  transform: rotateY(270deg) !important;
}

.beidaiThree {
  left: 0 !important;
}

.handThree1 {
  transform: rotate(-40deg) !important;
}

.handThree2 {
  transform: rotate(90deg) !important;
}

.handThree3 {
  transform: rotate(50deg) !important;
}

.handThree4 {
  transform: rotate(-100deg) !important;
}

.legThree1 {
  transform: rotate(55deg) !important;
}

.legThree2 {
  transform: rotate(-40deg) !important;
}

.legThree3 {
  transform: rotate(-55deg) !important;
}

.legThree4 {
  transform: rotate(40deg) !important;
}

.shakeLegLeft {
  transform: rotate(30deg) !important;
}

.shakeLegRight {
  transform: rotate(-30deg) !important;
}

.shakeLeg {
  transform: rotate(0deg) !important;
}

.headShake {
  top: 0px !important;
}

.bodyShake {
  transform: translate(-75%, -5%) skew(-8deg, 0deg) !important;
}

.headMove1 {
  left: 15px;
}

.handThreeShakeLeft {
  transform: rotate(40deg) !important;
}

.handThreeShakeRight {
  transform: rotate(-55deg) !important;
}

.handThreeShakeBottom1 {
  transform: rotate(-110deg) !important;
}

.handThreeShakeBottom2 {
  transform: rotate(110deg) !important;
}

.blackZi {
  right: 100px;
  left: auto;
}

.finalfun {
  border-radius: 50%;
  cursor: pointer;
  animation: finalfun 1s linear infinite;
}

@keyframes finalfun {
  0% {
    box-shadow: 0px 0px 5px 5px #fff;
  }

  100% {
    box-shadow: 0px 0px 5px 0px red;
  }
}

.finalBall {
  position: absolute;
  top: 44px;
  left: -22px;
  border-radius: 50%;
  animation: finalBal 3s linear infinite;
}

@keyframes finalBal {

  0%,
  100% {
    transform: rotate(0deg);
    opacity: 0.9;
    box-shadow: 0px 0px 5px 5px lightskyblue;
  }

  50% {
    transform: rotate(3600deg);
    opacity: 1;
    box-shadow: 0px 0px 5px 15px lightblue;
  }
}

.overbox {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  opacity: 1;
  background: #fff;
}

.black {
  background-color: black;
  color: #fff !important;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif !important;
  line-height: 100px !important;
  font-size: 60px !important;

  .leg,
  .leg2 {
    background: #000 !important;
  }
}

.boom {
  position: absolute;
  width: 400px;
  top: -80px;
  left: -155px;
  z-index: 9;
}

@keyframes heiziReset {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1440deg);
  }
}

.heiReset {
  animation: heiziReset 0.5s;
}

.heiziFace {
  transform-origin: center center 40px;
  transform: rotateY(-90deg);
}

.over-enter-active,
.over-leave-active {
  transition: all 5s ease-in-out;
}

.over-enter-from,
.over-leave-to {
  opacity: 0;
}

.whiteBack {
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  overflow: hidden;

  .whiteTop {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transform-origin: 0 0;
    transform: rotate(0deg);
    background-image: url("https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18399baec3c24dbdbd9761fe077f5e6d~tplv-k3u1fbpfcp-watermark.image");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .whiteBot {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: #fff;
    bottom: 0;
    transform-origin: 100% 100%;
    transform: rotate(0deg);
    background-image: url("https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19acac939e6848679eaf242c3ef9dbc4~tplv-k3u1fbpfcp-watermark.image");
    background-size: cover;
    background-repeat: no-repeat;
  }

  img {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .left-enter-active,
  .left-leave-active {
    transition: all 1s ease-in-out;
  }

  .left-enter-from,
  .left-leave-to {
    transform: rotate(-90deg);
  }

  .right-enter-active,
  .right-leave-active {
    transition: all 1s ease-in-out;
  }

  .right-enter-from,
  .right-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }

  .talkBoxLeft {
    position: absolute;
    right: 40px;
    top: 50%;
    max-width: 200px;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid gainsboro;
  }

  .talkBoxRight {
    position: absolute;
    left: 40px;
    top: 50%;
    max-width: 200px;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid gainsboro;
  }
}
</style>